/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
const creator = '老高'
function getBookList() {
    axios({
        url: 'http://hmajax.itheima.net/api/books',
        params: {
            creator
        }
    }).then(res => {
        const tbody = document.querySelector('.list')
        tbody.innerHTML = res.data.data.map(({ bookname, author, publisher, id }, index) => `
            <tr>
                <td>${index + 1}</td>
                <td>${bookname}</td>
                <td>${author}</td>
                <td>${publisher}</td>
                <td>
                    <span data-id=${id} class="del">删除</span>
                    <span data-id=${id} class="edit">编辑</span>
                </td>
            </tr>
        `).join('')
    })
}

// 测试代码 添加弹层的显示 使用js方式
const modalDom = document.querySelector('.add-modal')
const modal = new bootstrap.Modal(modalDom)


/**
 * 目标2：新增图书
 *  2.1 新增弹框->显示和隐藏
 *  2.2 收集表单数据，并提交到服务器保存
 *  2.3 刷新图书列表
 */
// 如果我们需要除了显示弹层外 想要做其他的事情 使用js方式
document.querySelector('.add-btn').addEventListener('click', function () {
    // 获取添加form表单
    const addForm = document.querySelector('.add-form')
    // 使用serialize获取表单数据
    const formObj = serialize(addForm, { hash: true, empty: true })
    console.log(formObj)
    // 使用axios发送请求
    // restful接口规范
    axios({
        url: 'http://hmajax.itheima.net/api/books',
        method: 'post',
        data: { ...formObj, creator }
    }).then(res => {
        // 1.清空表单
        addForm.reset()
        // 2.关闭弹层
        modal.hide()
        // 3.添加成功后需要重新渲染页面
        getBookList()
    }).catch(err => {
        console.log(err)
    })
})

// 初始化渲染
getBookList()

/**
 * 目标3：删除图书
 *  3.1 删除元素绑定点击事件->获取图书id
 *  3.2 调用删除接口
 *  3.3 刷新图书列表
 */


/**
 * 目标4：编辑图书
 *  4.1 编辑弹框->显示和隐藏
 *  4.2 获取当前编辑图书数据->回显到编辑表单中
 *  4.3 提交保存修改，并刷新列表
 */
const editModal = document.querySelector('.edit-modal')
const editModalBox = new bootstrap.Modal(editModal)
// 获取tbody使用事件委托
let editId // 当前编辑项的id
const tbody = document.querySelector('.list')
tbody.addEventListener('click', function ({ target }) {
    const id = +target.dataset.id
    // 编辑
    if (target.classList.contains('edit')) {
        editId = id
        // 通过调用接口获取当前点击项的数据
        axios({
            url: `http://hmajax.itheima.net/api/books/${id}`
        }).then(res => {
            const { bookname, author, publisher } = res.data.data
            // 给表单赋值
            document.querySelector('.edit-form .bookname').value = bookname
            document.querySelector('.edit-form .author').value = author
            document.querySelector('.edit-form .publisher').value = publisher
            // 显示弹框
            editModalBox.show()
        }).catch(error => {
            console.log(error)
        })
        // 处理删除功能
    } else if (target.classList.contains('del')) {
        if (!confirm('确认要删除吗，删除后不可撤回')) return
        // 调用接口
        axios({
            // 1.查询参数 ?name=xx  2.请求体  3.路径传参 /books/12343  4.请求头 
            url: `http://hmajax.itheima.net/api/books/${id}`,
            method: 'delete'
        }).then(() => {
            // 重新渲染
            getBookList()
        }).catch((error) => {
            console.log(error)
        })
    }
})


// 给修改按钮绑定点击
const editBtn = document.querySelector('.edit-btn')
editBtn.addEventListener('click', function () {
    // 1.获取数据
    const editForm = document.querySelector('.edit-form')
    const formObj = serialize(editForm, { hash: true, empty: true })
    // 2.发送请求 更新数据
    axios({
        url: `http://hmajax.itheima.net/api/books/${editId}`,
        method: 'put',
        data: { ...formObj, creator }
    }).then(res => {
        // 1.清空表单
        editForm.reset()
        // 2.关闭弹层
        editModalBox.hide()
        // 3.重新渲染
        getBookList()
    })
})
